<template>
  <!--首页tab滚动切换模块 可左右滑动切换-->
  <!--<div class=" cjy-scroll " style="overflow-x: scroll;height: 2.5rem ">-->
  <div class="cjy-outer" ref="navhead">
    <ul class="cjy-list " style="min-width: 100%">
      <!--每个分类选项按钮-->
      <li class="cjy-tab-item cjy-tab-item-height"
          v-for="(item, index) in titleInfo" :key="index"
          :class="{'active-list':activeIndex == index}"
          :style="activeIndex == index ? activeStyle:normalStyle"
          @click=" changeIndex(index)" ref="titleLi">
        <!--:style="{color: activeIndex == index ?styleConfig.colorStyle:'' , width:width}"-->
        <span class="tab-item-text">{{item.className}}</span>
        <div v-if=" item.superscriptStatus"
             style="width: 0.7rem;height:0.7rem; background: #ff2600;position:absolute;left: 0.2rem;top: 0.1rem;line-height: 0.7rem;font-size: 0.55rem;border-radius: 3px;color:white;overflow: hidden">
          {{item.superscript}}
        </div>
      </li>
      <!--每个分类选项按钮end-->
    </ul>
  </div>
</template>

<script>
  import BScroll from 'better-scroll';
  import PopUp from '@/real-components/PopUps';
  import TapSelectBox from '@/real-components/TapSelectBox';

  export default {
    data() {
      return {
        classifyClum: false, //控制下拉菜单的
        backGroundColor: 'rgba(255, 255, 255, 0.8)',
        colorStyle: '',
        normalStyle: {},
        activeStyle: {},
        isSupportTransfrom: true,
      };
    },
    props: {
      titleInfo: {
        type: Array,
        //传入的数据如下 分类名称必传
        default: () => [],
      },
      styleConfig: {
        type: Object,
        default: () => {
          return {
            colorStyle: '#299a28',
            activeTextColor: '#000',
            activeBorderColor: '299a28',
            activeBackgroundColor: '',
            normalColor: 'black',
          };
        },
      },

      width: {
        type: String,
        default: '',
      },

      activeIndex: {
        type: Number,
        default: 0
      }
    },
    components: {TapSelectBox, PopUp},
    watch: {
      activeIndex(newData) {
        setTimeout(() => {
          this.tapMove(newData);
        }, 50);
      },

      titleInfo() {
        this.scroll.refresh();
      },
      $route() {
        this.classifyClum = false;
      },
      styleConfig() {
        this.initStyleConfig();
      },
    },
    methods: {
      //tap栏滚动
      tapMove(newData, time) {
        var testDiv = this.$refs.titleLi;
        var index = newData;
        var activeTitle = testDiv ? testDiv[index] : '';
        var scrollY;
        var outerHeight = this.$refs.navhead ? this.$refs.navhead.offsetHeight : 500;
        if (!activeTitle) {
          return;
        }
        time = time == 0 || time ? time : 500;
        scrollY = Math.max(0, activeTitle.offsetTop - outerHeight / 2 + activeTitle.offsetHeight / 2);
        scrollY = Math.min(scrollY, this.scroll.scrollerHeight - outerHeight);
        this.scroll.scrollTo(0, -scrollY, time, 'easing');
      },

      closeClassifyClum() {
        this.classifyClum = false;
      },

      changeIndex(index) {
        this.$emit('changeClassifyIndex', index);
      },

      initStyleConfig() {
        var styleConfig = this.styleConfig;

        this.normalStyle = {
          fontSize: styleConfig.normalFontSize || '',
          color: styleConfig.normalTextColor || '',
          borderColor: styleConfig.normalBorderColor || '',
          backgroundColor: styleConfig.normalBackgroundColor || '',
        };

        this.activeStyle = {
          fontSize: styleConfig.colorStyle || '',
          color: styleConfig.activeTextColor || '299a28',
          borderColor: styleConfig.activeBorderColor || '',
          backgroundColor: styleConfig.activeBackgroundColor || '',
        };
      },
    },

    created() {
      this.isSupportTransfrom = document.body.style.transform != undefined;
    },
    mounted() {
      this.initStyleConfig();

      this.$nextTick(() => {
        var scroll = new BScroll(this.$refs.navhead, {
          startX: 0,
          startY: 0,
          scrollX: false,
          scrollY: true,
          click: true,
          bounce: false,
          momentumLimitDistance: 5,
        });
        this.scroll = scroll;
        this.tapMove(this.activeIndex, 0);
      });
    },
    updated() {
      this.$nextTick(() => {
        this.scroll.refresh();
        var maxIndex = this.titleInfo.length - 1 || 0;
        if (maxIndex < this.activeIndex) {
          this.$store.dispatch('cjy/changeClassifyIndex', maxIndex);
        }
      });
    },
  };
</script>

<style scoped>


  .tab-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }

  .cjy-tab-item {
    padding: 0 0.2rem;
    color: rgb(130, 130, 130);
    padding: 0 0.3rem;
    position: relative;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(228, 228, 228);
  }

  .cjy-tab-item-height {
    width: 100%;
    height: 2.2rem;
    line-height: 2.2rem;
    font-size: 0.7rem;
  }

  .active-list {
    background: white;
    color: #0f8de0;
  }

  .cjy-list {
    position: absolute;
    width: 100%;
  }

  .cjy-outer {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
  }

  .active-list:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 2px;
    margin: auto;
    background: #299a28;
  }
</style>
